<template>
  <view class="review-container">
    <view class="review-header">
      <view class="header-left" @click="back">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">单词复习</text>
      <view class="header-right">{{ reviewWords.length }}个单词</view>
    </view>
    
    <view class="review-content">
      <!-- 加载状态 -->
      <view class="loading" v-if="loading">
        <text>加载中...</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty" v-else-if="reviewWords.length === 0">
        <text class="empty-text">暂无需要复习的单词</text>
        <text class="empty-desc">继续保持学习进度</text>
      </view>
      
      <!-- 单词列表 -->
      <scroll-view v-else class="word-list" scroll-y>
        <view 
          v-for="(word, index) in reviewWords" 
          :key="word.id" 
          class="word-item"
        >
          <view class="word-main">
            <text class="word-text">{{ word.word }}</text>
            <text class="word-phonetic">{{ word.phonetic }}</text>
          </view>
          <view class="word-meaning">
            <text class="meaning-text">{{ getWordMeaning(word) }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 开始复习按钮 -->
    <view class="start-review-btn-container" v-if="!loading && reviewWords.length > 0">
      <button class="start-review-btn" @click="startReview">
        开始复习 ({{ reviewWords.length }})
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { api } from '@/api';

const reviewWords = ref([]);
const loading = ref(false);

// 获取单词释义
const getWordMeaning = (word) => {
  if (word.translations && word.translations.length > 0) {
    return `${word.translations[0].pos} ${word.translations[0].cn}`;
  }
  return word.translation || '暂无释义';
};

// 加载复习单词
const loadReviewWords = async () => {
  try {
    loading.value = true;
    
    // 获取用户ID（这里需要根据你的实际项目获取用户ID）
    const userInfo = uni.getStorageSync('userInfo');
    const userId = userInfo?.id || 1; // 默认使用1，请根据实际情况修改
    
    // 调用API获取复习单词
    const response = await api.vocab.getReviewVocabs(50, userId); // 限制50个单词
    
    if (response.data && response.data.words) {
      reviewWords.value = response.data.words;
    } else {
      reviewWords.value = response.data || [];
    }
    
    console.log('复习单词数据:', reviewWords.value);
  } catch (error) {
    console.error('加载复习单词失败', error);
    uni.showToast({ 
      title: '加载失败', 
      icon: 'none' 
    });
    
    // 使用模拟数据测试
    reviewWords.value = getMockWords();
  } finally {
    loading.value = false;
  }
};

// 模拟数据
const getMockWords = () => {
  return [
    {
      id: 1,
      word: "example",
      pronunciation: "/ɪɡˈzæmpəl/",
      translation: "例子",
      translations: [{ pos: "n", cn: "例子" }]
    },
    {
      id: 2,
      word: "test",
      pronunciation: "/test/",
      translation: "测试",
      translations: [{ pos: "n", cn: "测试" }]
    },
    {
      id: 3,
      word: "learn",
      pronunciation: "/lɜːrn/",
      translation: "学习",
      translations: [{ pos: "v", cn: "学习" }]
    },
    {
      id: 4,
      word: "memory",
      pronunciation: "/ˈmeməri/",
      translation: "记忆",
      translations: [{ pos: "n", cn: "记忆" }]
    },
    {
      id: 5,
      word: "vocabulary",
      pronunciation: "/vəˈkæbjəleri/",
      translation: "词汇",
      translations: [{ pos: "n", cn: "词汇" }]
    }
  ];
};

// 开始复习
const startReview = () => {
  if (reviewWords.value.length === 0) {
    uni.showToast({
      title: '暂无复习单词',
      icon: 'none'
    });
    return;
  }
  
  // 跳转到学习页面
  uni.navigateTo({
    url: '/pages/vocab/learn'
  });
};

// 返回上一页
const back = () => {
  uni.navigateBack();
};

onMounted(() => {
  loadReviewWords();
});
</script>

<style scoped>
.review-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 36rpx;
  color: #333;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.header-right {
  font-size: 28rpx;
  color: #666;
}

.review-content {
  flex: 1;
  padding: 20rpx;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
  font-size: 32rpx;
  color: #666;
}

.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  text-align: center;
}

.empty-text {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.empty-desc {
  font-size: 28rpx;
  color: #999;
}

.word-list {
  height: 100%;
}

.word-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.word-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.word-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.word-phonetic {
  font-size: 28rpx;
  color: #999;
}

.word-meaning {
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
}

.meaning-text {
  font-size: 30rpx;
  color: #666;
  line-height: 1.5;
}

.start-review-btn-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.start-review-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
}

.start-review-btn:active {
  opacity: 0.9;
}
</style>